<template>
	<view class="yao-qing-content">
		<view class="code-content">
			<view class="code-title">您的邀请码</view>
			<view class="six-code">
				<text>1</text>
				<text>2</text>
				<text>3</text>
				<text>4</text>
				<text>5</text>
				<text>6</text>
			</view>
			<view class="warning-box">邀请的好友也可在注册时直接填写邀请码</view>
			<view class="qr-code-box">
				<tki-qrcode
					ref="qrcode"
					uni="rpx"
					:val="text"
					:size="160 * 2"
					:showLoading="true"
				/>
			</view>
			<view class="chang-an-box">长按图片即可保存</view>
			<view class="zhuan-fa-btn">转发邀请</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
		    return {
		        text: 'https://www.baidu.com'
		    }
		},
		mounted() {
			this.generateQRCode();
		},
		methods: {
			generateQRCode() {
			  const refQR = this.$refs['qrcode']
			  refQR._makeCode()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yao-qing-content {
		position: relative;
		width: 100%;
		height: 100vh;
		background: url('../../static/images/yao-qing-bg.png');
		background-size: cover;
		background-repeat: no-repeat;
	}
	.code-content {
		position: absolute;
		bottom: 83rpx;
		left: 50%;
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 660rpx;
		height: 842rpx;
		margin-left: -330rpx;
		background: #FFF;
		border-radius: 20rpx;
	}
	.code-title {
		margin-top: 57rpx;
		font-weight: 400;
		font-size: 31rpx;
		color: #333333;
	}
	.six-code {
		margin-top: 20rpx;
		text {
			width: 42rpx;
			height: 59rpx;
			background: #EFEFEF;
			border-radius: 4rpx;
			font-size: 31rpx;
			color: #E63A26;
			margin-right: 10rpx;
		}
	}
	.warning-box {
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
	}
	.qr-code-box {
		margin-top: 20rpx;
	}
	.chang-an-box {
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
	}
	.zhuan-fa-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 526rpx;
		height: 77rpx;
		margin-top: 60rpx;
		background: #E63A26;
		border-radius: 44rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>
